<template>
	<view class="flex-col page">

		<view class="flex-col mt-25">

			<view class="flex-row justify-center self-center section initial-state fadeIn">
				<image class="self-start image_5" src="/static/image 296.png" />
				<view class="ml-14 flex-col justify-start items-start self-center relative group_2">
					<text class="font text"> Nice to meet you</text>
				</view>
			</view>
 
			<view class="flex-col justify-start self-stretch relative group_3">


				<view class="flex-col section_4">
					<view class="flex-col group_4">
						<text class="self-start font_2 text_3">Have Some Fun with Dizy!</text>
						<!--          <text class="self-stretch text_4 mt-15">Start a chat with Dizy and start having some fun with Dizy!</text -->
					</view>
					<view class="flex-col justify-start items-center text-wrapper" @click="onImageWrapperClick">
						<text class="font_2 text_5">Start a New Chat</text>
					</view>
				</view>



			</view>


			<view class="flex-col justify-start self-stretch relative group_5 fixed-bottom">
				<view class="flex-row justify-between section_5">
					<image class="image_14" src="/static/home.png" />
					<image class="image_14 image_15" src="/static/person.png" />
				</view>
				<view class="flex-col justify-start items-center image-wrapper_3 pos_10" @click="onImageWrapperClick">
					<image class="image_16" src="/static/Vector.png" />
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		onReady() {

		},
		methods: {
			onImageWrapperClick() {
				// 跳转到下一个页面，这里需要替换为您想要跳转的页面路径
				uni.navigateTo({
					url: '/pages/index/index' // 请替换为您的页面路径
				});
			}
		}
	};
</script>

<style>
	.ml-5 {
		margin-left: 10rpx;
	}

	.mt-25 {
		margin-top: 50rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}

	.page {
		padding-top: 26rpx;
		background-color: #fafafa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding-left: 42rpx;
		padding-right: 30rpx;
	}

	.image {
		width: 108rpx;
		height: 42rpx;
	}

	.image_2 {
		width: 34rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_4 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.section {
		padding: 28rpx 50rpx 24rpx;
		background-color: #ffffff;
		border-radius: 32rpx;
		box-shadow: 0rpx 8rpx 150rpx #9b9b9b1a;
		width: 400rpx;
	}

	.image_5 {
		width: 38rpx;
		height: 38rpx;
	}

	.group_2 {
		margin-right: -10rpx;
		width: 300.32rpx;
	}

	.font {
		font-size: 32rpx;
		font-family: NunitoSans;
		line-height: 50rpx;
		font-weight: 700;
	}
 
  
	.text {
		color: #32343899;
		background-repeat: no-repeat;
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 如果文本溢出，隐藏溢出部分 */
		text-overflow: ellipsis;
		/* 如果文本溢出，显示省略号 */
	}

	.text_2 {
		color: #323438;
		word-break: break-all;
		width: 75.3rpx;
	}

	.pos {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.group_3 {
		margin-top: 32rpx;
		padding-top: 460rpx;
	}

	.section_4 {
		margin: 0 50rpx;
		padding: 12rpx 50rpx 70rpx;
		filter: drop-shadow(0rpx 8rpx 120rpx #a9a9a91a);
		/* background-image: url('/static/robot2.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_4 {
		margin-left: 36rpx;
		margin-right: 24rpx;
		padding: 112rpx 0;
	}

	.font_2 {
		font-size: 36rpx;
		font-family: NunitoSans;
		line-height: 44rpx;
		font-weight: 700;
	}

	.text_3 {
		margin-left: 24rpx;
		color: #323438;
		text-align: center;
		width: 392rpx;
	}

	.text_4 {
		color: #32343899;
		font-size: 28rpx;
		font-family: NunitoSans;
		line-height: 54rpx;
		text-align: center;
	}

	.text-wrapper {
		padding: 40rpx 0 32rpx;
		background-color: #2dcbd0;
		border-radius: 40rpx;
		box-shadow: 0rpx 12rpx 150rpx #6457570d;
	}

	.text_5 {
		color: #ffffff;
		text-align: center;

		white-space: nowrap;
		/* 防止文本换行 */

	}

	.image_6 {
		opacity: 0.25;
		filter: blur(140rpx);
		width: 502rpx;
		height: 546rpx;
	}

	.pos_2 {
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}

	.image-wrapper_2 {
		padding-top: 12rpx;
		/* background-image: url('/static/robot1.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 434rpx;
		height: 120rpx;
	}

	.pos_8 {
		position: absolute;
		left: 50%;
		top: 240rpx;
		transform: translateX(-50%);
	}

	.image_11 {
		width: 400rpx;
		height: 112rpx;
	}

	.section_2 {
		padding-bottom: 12rpx;
		/* background-image: url('/static/robot1.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 370rpx;
	}

	.pos_6 {
		position: absolute;
		left: 50%;
		top: 155.58rpx;
		transform: translateX(-50%);
	}

	.image-wrapper {
		padding: 256rpx 0 52rpx;
		/* background-image: url('/static/robot1.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 280rpx;
	}

	.image_13 {
		margin-right: 40rpx;
		width: 90rpx;
		height: 42rpx;
	}

	.image_10 {
		width: 320rpx;
		height: 120rpx;
	}

	.pos_7 {
		position: absolute;
		left: 0;
		top: 45.6rpx;
	}

	.section_3 {
		padding: 32rpx 60rpx;
		background-image: url('/static/robot1.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 246rpx;
	}

	.pos_9 {
		position: absolute;
		left: 50%;
		top: 89.38rpx;
		transform: translateX(-50%);
	}

	.image_12 {
		border-radius: 50%;
		width: 31.52rpx;
		height: 50.46rpx;
		animation: fadeInOut 2s linear infinite;
	}

	.image_9 {
		width: 66rpx;
		height: 28rpx;
	}

	.pos_5 {
		position: absolute;
		left: 50%;
		top: 145.5rpx;
		transform: translateX(-50%);
	}

	.image_8 {
		width: 40rpx;
		height: 100rpx;
	}

	.pos_4 {
		position: absolute;
		right: 340.24rpx;
		top: 61.88rpx;
	}

	.image_7 {
		filter: drop-shadow(0rpx 7.38rpx 36.9rpx #2dcbd099);
		width: 50rpx;
		height: 48rpx;
	}

	.pos_3 {
		position: absolute;
		right: 321.24rpx;
		top: 6.02rpx;
	}

	.group_5 {
		margin-top: 60rpx;
		padding-top: 50rpx;
	}

	.group_5.fixed-bottom {
		position: fixed;
		/* 设置为固定定位 */
		bottom: 0;
		/* 固定在视口底部 */
		width: 100%;
		/* 宽度设置为100%，或者根据需要调整 */
		/* 其他必要的样式 */
	}

	.section_5 {
		transform: translateY(20rpx);
		padding: 80rpx 112rpx 118rpx;
		filter: drop-shadow(0rpx 8rpx 120rpx #a9a9a91a);
		background-image: url('');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.image_14 {
		width: 60rpx;
		height: 60rpx;

	}

	/* 定义动画关键帧 */
	@keyframes fadeInOut {

		0%,
		100% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}
	}

	@keyframes slideUp {
		0% {
			transform: translateY(100%);
		}

		50% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100%);
		}
	}

	.image_16 {
		width: 60rpx;
		height: 60rpx;
		/* animation: fadeInOut  5s linear infinite; */
		/* 动画名称，持续时间，速度曲线，循环次数 */

	}

	/* 定义动画关键帧 */
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.image_15 {
		margin-right: 8rpx;
	}

	.image-wrapper_3 {
		padding: 36rpx 0;
		background-color: #2dcbd0;
		border-radius: 50rpx;
		width: 132rpx;
	}

	.pos_10 {
		position: absolute;
		left: 50%;
		top: 20;
		margin-top: -20rpx;
		transform: translateX(-50%);
	}

	/* 初始状态，元素完全不可见 */
	.initial-state {
		opacity: 0;
		transform: translateY(-100%);
		visibility: hidden;
		/* 确保元素在动画开始前不可见 */
	}

	/* 动画关键帧 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-100%);
			visibility: hidden;
		}

		to {
			opacity: 1;
			transform: translateY(0);
			visibility: visible;
		}
	}

	/* 应用动画的类 */
	.fadeIn {
		animation: fadeIn 1s ease-in-out forwards;

		/* 使用forwards保持动画结束状态 */
	}

	/* 延迟1秒后隐藏元素 */
	.fadeOut {
		animation: fadeOut 1s forwards;
		animation-delay: 1s;
		/* 延迟1秒后开始淡出动画 */
	}

	@keyframes fadeOut {
		from {
			opacity: 1;
			visibility: visible;
		}

		to {
			opacity: 0;
			visibility: hidden;
		}
	}
</style>